<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			/* #xq-search-result-scroll-wrapper{
				margin-top: 84px;
			} */
			.xq-fixed-to-header{
				height: 40px;
			}
			#shici-search-content{
				display: inline-block;
				min-width: 12.5rem;
				left: 8px;
				margin-top: 2px;
			}
			#shici-search-content input{
				border-radius: 2px;
			}
			/* .mui-search.mui-active:before {
			    margin-top: -13px;
			} */
			
			.mui-search .mui-placeholder {
				pointer-events: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
			<div class="mui-input-row mui-search" id='shici-search-content'>
			    <input type="search" class="mui-input-clear" placeholder="搜索诗文或作者">
			</div>
		</header>
		<div class="mui-content">
			
			<div id="main-content-slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#shiwen-list">诗文</a>
					<a class="mui-control-item" href="#writer-list">作者</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="shiwen-list" class="mui-slider-item mui-control-content">
						<div id='xq-shiwen-result-scroll-wrapper' class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul id='shiwen-result-list-ul' class="mui-table-view" v-cloak>
									<li v-for="(itemInfo,index) in shiwenList" class="mui-table-view-cell" :info-id="itemInfo.id" :index="index">
										<a>
											<div class="mui-media-body">
												<div class="xq-media-body-title-line">
													<div class="left-title">{{itemInfo.title}}</div>
													<div class="right-title">[{{itemInfo.dynasty}}] {{itemInfo.writer}}</div>
												</div>
												<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.shortContent}}</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="writer-list" class="mui-slider-item mui-control-content">
						<div id='xq-writer-result-scroll-wrapper' class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul id='writer-result-list-ul' class="mui-table-view" v-cloak>
									<li v-for="(itemInfo,index) in writerList" class="mui-table-view-cell" :info-id="itemInfo.id" :index="index">
										<a>
											<img class="mui-media-object mui-pull-left xq-circle-img" :src="itemInfo.headImageUrl" />
											<div class="mui-media-body">
												<div class="xq-media-body-title-line">
													<div class="left-title">{{itemInfo.name}}</div>
													<div class="right-title">{{itemInfo.dynasty}}</div>
												</div>
												<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.simpleIntro}}</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/vue-2.3.3.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/commonUtils.js"></script>
		<script src="../js/shiwenListLoader.js"></script>
		<script src="../js/writerListLoader.js"></script>
		<script src="../js/searchPageManager.js"></script>
		<script type="text/javascript">
			mui.init();
			//
			mui.ready(function(){
				if (mui.os.plus) {
					return;
				}
				SettingInfoManager.setPageFontFromSetting();
				// 搜索事件,获取搜索关键词
				var searchPageManager=new SearchPageManager();
				searchPageManager.init({});
			})
			
			mui.plusReady(function () {
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("searchPage");
				SettingInfoManager.setPageFontFromSetting();
			    var searchPageManager=new SearchPageManager();
			    searchPageManager.init({});
			})
			
		</script>
	</body>

</html>
